<template>
	<view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption" height="0" style="min-height: 0;">
			<view class="transaction_detail_list">
				<view class="transaction_detail_item" style="position: relative;" v-for="(item,index) in list" :key="index">
					<view class="tdi_expense" :class="[list.length==(index+1)&&'tdi_topup_extra']">
						<view class="tag-view" style="position: absolute;right: 0px;top: 65px;">
							<uni-tag size="mini"
								:text="item.statusText"
								:type="item.status == '10'?'default':item.status == '20'?'warning':item.status == '30'?'success':''" />
						</view>
						<view class="tdi_expense_top">
							<text class="tdi_expense_top_effect">{{item.vipPackageName}}</text>
							<text class="tdi_expense_top_money">￥{{item.vipPackagePrice}}元</text>
						</view>
						<view class="tdi_expense_middle">
							<text class="tdi_expense_middle_ordernumber">支付编号：{{item.outTradeNo}}</text>
							<text class="tdi_expense_middle_refund">{{item.payStatusText}}</text>
						</view>
						<view style="display: flex;gap: 10rpx;align-items: center;">
							<text class="tdi_expense_middle_ordernumber">支付凭证：</text>
							<img @click="previewImage(item.payFilePath)" style="width: 150rpx;height: 150rpx;"
								:src="item.payFilePath" alt="" />
						</view>
						<view class="tdi_expense_bottom">
							<text class="tdi_expense_bottom_time">{{item.createTime}}</text>
						</view>
						<view class="tdi_expense_bottom" v-if="item.reason">
							<text class="tdi_expense_bottom_time">拒绝原因:{{item.reason}}</text>
						</view>
						<!-- payType=40并且status=10 -->
						<view v-if="item.payType == 40 && item.status == 10" class="upload-btn d-c-c d-c flex-1"
							@click="openUpload(item)">
							<div class="icon iconfont icon-xiangji f34"></div>
							<div class="gray9">上传凭证</div>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import Upload from '@/components/upload/upload.vue';
	export default {
		mixins: [MescrollMixin],
		components: {
			Upload
		},
		data() {
			return {
				rowData: {},
				asitemindex: 1,
				isUpload: false,
				// 下拉刷新的组件 参数 可以 改变的
				downOption: {
					use: false,
					auto: true //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					auto: true, // 不自动加载
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '暂无明细', // 提示
						icon: '/static/my/transaction_empty.png'
					},
					textNoMore: '—— 没有更多记录了 ——'
				},
				list: [],
				listA: []
			}
		},
		onShow() {
			this.upCallback({
				num: 0,
				size: 99999999
			});
		},
		methods: {
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			//下拉刷新 不需要开启
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			// 上拉加载
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size;
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('plus/vipPackage/buy/record', {}, function(res) {
					console.log(res, '2345676543');
					const {
						data
					} = res;
					// let curPageLen = data.records.length;
					// let totalPage = Number(data.total) / page.pageSize;
					// if (page.num == 1) self.list = [];
					// data.records.map(item => {
					// 	item.isImage = false
					// 	return item
					// })
					self.list = data;
					uni.hideLoading();
					// self.mescroll.endByPage(curPageLen, totalPage)
				});
			},
			/*打开上传图片*/
			openUpload(row) {
				this.rowData = row;
				this.isUpload = true;
			},

			/*获取上传的图片*/
			getImgsFunc(e) {
				console.log(e, 'eee')
				let self = this;
				self.isUpload = false;
				this.saveData(e)
				if (e && typeof(e) != 'undefined') {
					let this_length = self.images.length,
						upload_length = e.length;
					if (this_length + upload_length < 7) {
						self.images = self.images.concat(e);
					} else {
						let leng = 6 - this_length;
						for (let i = 0; i < leng; i++) {
							self.images.push(e[i]);
						}
					}
				}
			},
			// 提交数据
			saveData(e) {
				let _this = this
				this._post('plus/vipPackage/buy/confirm', {
					fileId: e[0].fileId,
					recordId: this.rowData.id
				}, function(res) {
					console.log(res, '2345676543');
					const {
						data,
						code
					} = res;
					if (code == 1) {
						uni.showToast({
							title: '上传成功',
							duration: 2000,
							icon: 'success'
						});
						setTimeout(() => {
							_this.upCallback({
								num: 0,
								size: 99999999
							})
						}, 1000)
					}
				});
			},

			/*删除图片*/
			deleteFunc(e) {
				this.images.splice(e, 1);
			},
		}
	}
</script>
<style scoped>
	/deep/.empty-icon {
		margin: 0 auto;
	}
</style>
<style lang="less" scoped>
	.dd-head {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 140rpx;
		line-height: 84rpx;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		z-index: 99;
		position: sticky;
		top: var(--window-top);
		position: -webkit-sticky;
		background: #FFFFFF;
	}

	.upload-btn {
		// background-color: #077840;
		border-radius: 10rpx;
		color: #FFFFFF;
		margin-top: 10px;
		display: flex;
		gap: 10rpx;
		align-items: center;
		justify-content: center;
	}

	.dd-sitem {
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 500;
		line-height: 84rpx;
		color: #077840;
		border-bottom: 4rpx solid #077840;
	}

	.dd-item {
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 84rpx;
	}

	.transaction_detail_list {
		padding: 0 30rpx;
		margin-top: 36rpx;

		.transaction_detail_item {
			.tdi_topup {
				height: 140rpx;
				border-bottom: 2rpx solid #EEEEEE;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&_left {
					display: flex;
					flex-direction: column;
					justify-content: center;

					&_description {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
					}

					&_time {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
						margin-top: 20rpx;
					}
				}

				&_right {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF5100;
					line-height: 40rpx;
				}
			}

			.tdi_expense {
				border-bottom: 2rpx solid #EEEEEE;
				box-sizing: border-box;
				padding: 18rpx 0 20rpx;

				&_top {
					display: flex;
					justify-content: space-between;

					&_effect {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
					}

					&_moeny {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 40rpx;
					}
				}

				&_middle {
					display: flex;
					justify-content: space-between;
					margin: 20rpx 0;

					&_ordernumber {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
					}

					&_refund {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF5100;
						line-height: 40rpx;
					}
				}

				&_bottom {
					&_time {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
					}
				}
			}

			.tdi_topup_extra {
				border-bottom: none;
			}
		}
	}
</style>